<template>
  <ContentPanel>
    <div class="show-info" v-if="showType == 'user'">
      <div class="user-info">
        <UserBaseInfo :userInfo="userInfo" />
        <div class="more-op">
          <el-dropdown placement="bottom-end">
            <span class="el-dropdown-link">
              <div class="iconfont icon-gengduo"></div>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="changePart('edit')">修改信息</el-dropdown-item>
                <el-dropdown-item @click="changePart('pwd')">修改密码</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="part-item">
        <div class="part-title">朋友权限</div>
        <div class="part-content">
          {{ userInfo.joinType == 0 ? '直接加入' : '验证加入' }}
        </div>
      </div>
      <div class="part-item">
        <div class="part-title">个性签名</div>
        <div class="part-content">{{ userInfo.note || '-' }}</div>
      </div>
      <div class="logout">
        <el-button type="primary" @click="logout">退出登录</el-button>
      </div>
    </div>
    <div v-if="showType == 'edit'">
      <UserInfoEdit @editBack="editBack" :data="userInfo" />
    </div>
    <div v-if="showType == 'pwd'">
      <UserInfoPassword @editBack="editBack" />
    </div>
  </ContentPanel>
</template>

<script setup>
import {ref, getCurrentInstance} from 'vue'
import UserInfoEdit from './UserInfoEdit.vue'
import UserInfoPassword from './UserInfoPassword.vue'
import {useUserInfoStore} from '@/stores/UserInfoStore'
import { useRouter } from "vue-router";

const {proxy} = getCurrentInstance()
const userInfoStore = useUserInfoStore()
const router = useRouter();

const userInfo = ref({})
const getUserInfo = () => {
  userInfo.value = userInfoStore.getInfo();
}
getUserInfo();

const showType = ref('user')

const changePart = (part) => {
  showType.value = part
}

const editBack = () => {
  showType.value = 'user'
  getUserInfo()
}

const logout = () => {
  proxy.Confirm({
    message: "确定要退出登录吗？",
    okfun: async () => {
      await proxy.Api.logout();
      router.push("/login");
      proxy.WebSocket.closeWs()
      proxy.$message.success('退出成功')
      localStorage.removeItem("userInfo")
      localStorage.removeItem("token")
    },
  });
};
</script>

<style lang="scss" scoped>
.show-info {
  .user-info {
    position: relative;

    .more-op {
      position: absolute;
      right: 0px;
      top: 20px;
      cursor: pointer;

      .iconfont {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .part-item {
    display: flex;
    border-bottom: 1px solid #eaeaea;
    padding: 20px 0px;

    .part-title {
      width: 70px;
      color: #9e9e9e;
    }

    .part-content {
      flex: 1;
      margin-left: 15px;
      color: #161616;
    }
  }

  .logout {
    text-align: center;
    margin-top: 20px;
  }
}
</style>
